<template>
  <div class="strut-div">
    <div class="card-item" style="height: 325px;">
      <p class="card-title">太谷县主要农产品产量</p>
      <div class="card-div"><common-horizontal-bar-chart ref="productYield" :config="productYieldConfig"></common-horizontal-bar-chart></div>
    </div>

    <div class="card-item" style="height: 323px; margin-top: 20px;">
      <p class="card-title">规模养殖分布</p>
      <div class="card-div"><common-bar-chart ref="breedScale" :config="breedScaleConfig"></common-bar-chart></div>
    </div>


    <div>
      <div class="card-item" style="height: 303px; margin-top: 20px; float: left; width: 420px;">
        <p class="card-title">农机资源区域分布</p>
        <div class="card-div"><common-pieNew-chart ref="resourcesDistribution" :config="resourcesDistributionConfig"></common-pieNew-chart></div>
      </div>

      <div class="card-item" style="height: 303px; margin-top: 20px; float: left; width: 420px;margin-left: 20px;">
        <p class="card-title">农业合作社区域分布</p>
        <div class="card-div"><common-horizontal-bar-chart ref="cooperativeArea" :config="cooperativeAreaConfig"></common-horizontal-bar-chart></div>
      </div>
    </div>



  </div>
</template>

<script>
import {
  mainAgriculturalProcutNumsBarChart,
  scaleBreedAreaBarChart,
  agriculturalResourceAreaProportionChart,
  agriculturalCooperationAreaBarChart,
  colorList
} from '@/network/tg-fake-data.js';

import CommonBarChart from '@/components/common/common-bar-chart.vue';
import CommonHorizontalBarChart from '@/components/common/common-horizontal-bar-chart.vue';
import CommonPieNewChart from '@/components/common/common-pieNew-chart.vue';

export default {
  components: {
    CommonBarChart,
    CommonHorizontalBarChart,
    CommonPieNewChart
  },
  data() {
    return {
      productYieldConfig: {
        option: {
          id: 'productYield',
          yAxis: mainAgriculturalProcutNumsBarChart.dimension,
          x: [
            {
              title: '数量',
              data: mainAgriculturalProcutNumsBarChart.datas,
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [{
                  offset: 0,
                  color: '#4465F3' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: '#00FAFF' // 100% 处的颜色
                }],
              },
              stack: '1',
              position: 'right',
              axis: {
                min: 0,
                max: 0,
                name: '单位(吨)'
              }
            }
          ]
        }
      },
      breedScaleConfig: {
        option: {
          id: 'breedScale',
          xAxis: scaleBreedAreaBarChart.dimension,
          y: [
            {
              title: '数量',
              data: scaleBreedAreaBarChart.datas,
              color: {
                type: 'linear',
                x: 0,
                y: 1,
                x2: 0,
                y2: 0,
                colorStops: [{
                  offset: 0,
                  color: '#812DFF' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: '#341CE9' // 100% 处的颜色
                }],
              },
              stack: '1',
              position: 'top',
              axis: {
                min: 0,
                max: 0,
                name: '单位(家)'
              }
            }
          ]
        }
      },
      resourcesDistributionConfig: {
        option: {
          id: 'resourcesDistribution',
          title: '',
          color: colorList,
          legend: {
            show: false,
            left: '20%',
            top: '75%',
            width: '70%',
            itemGap: 15, //图例之间的间距
            orient: 'horizontal',
            textStyle: {
              color: '#fff',
              fontSize: 14
            },
            data: []
          },
          tooltip: {
            trigger: 'item',
            formatter: '{b} : {c} ({d}%)'
          },
          series: [
            {
              name: '',
              type: 'pie',
              radius: ['0%', '50%'],
              center: ['50%', '50%'],
              avoidLabelOverlap: false,
              label: {
                normal: {
                  show: true,
                  position: 'outer',
                  formatter: '{b} :  {d}%',
                  fontSize: '14'
                },
                emphasis: {
                  show: true,
                  textStyle: {
                    fontSize: '15',
                    fontWeight: 'bold'
                  }
                }
              },
              labelLine: {
                normal: {
                  show: false
                }
              },
              data: []
            }
          ]
        }
      },
      cooperativeAreaConfig: {
        option: {
          id: 'cooperativeArea',
          yAxis: agriculturalCooperationAreaBarChart.dimension,
          x: [
            {
              title: '数量',
              data: agriculturalCooperationAreaBarChart.datas,
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [{
                  offset: 0,
                  color: '#FF942C' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: '#FCFF00' // 100% 处的颜色
                }],
              },
              stack: '1',
              position: 'right',
              axis: {
                min: 0,
                max: 0,
                name: '单位(家)'
              }
            }
          ]
        }
      }
    };
  },
  mounted() {
    this.$refs.productYield.initChart();
    this.initbreedScale();
    this.initResourcesDistribution();
    this.$refs.cooperativeArea.initChart();
  },
  methods: {
    initbreedScale() {
      this.$refs.breedScale.initChart();
    },
    initResourcesDistribution() {
      agriculturalResourceAreaProportionChart.map((item, index) => {
        this.resourcesDistributionConfig.option.legend.data.push(item.village);
        this.resourcesDistributionConfig.option.series[0].data.push({
          value: item.num,
          name: item.village
        });
      });
      // console.log(this.resourcesDistributionConfig);
      this.$refs.resourcesDistribution.initChart();
    }
  }
};
</script>

<style></style>
